<script setup lang="ts">
// import Card from '@/components/MyCard/index.vue'
import { Plus, RefreshRight } from "@element-plus/icons-vue";
import BlogCard from "@/components/BlogCard.vue";
import List from "@/views/blog/List.vue";
import Content from "@/layout/Content.vue";
import LCR from "@/layout/LCR.vue";
import router from "@/router";
import { onMounted, ref, toRefs } from "vue";
import { listBlog } from "@/api/blog";
import { useUserStore } from "@/stores/user";
// import { Plus } from 'vue'
const data = ref<Array<any>>();
const pageQuery = ref({
  page: 1,
  size: 10,
  keyword: "",
  total: 0,
});

onMounted(() => {
  // const userStore = useUserStore();
  // if (userStore.getInfo() == null) {
  //   // userStore.getInfo()
  //   console.log(null);
  // }
  const { page, size, keyword } = pageQuery.value;
  listBlog(page, size, keyword).then((res) => {
    const { total, records } = res.data;
    data.value = records;
    pageQuery.value.total = total;
  });
});

const handlePost = () => {
  router.push("/post");
  console.log("发帖");
};

const refresh = () => {
  console.log("刷新");
};
</script>

<template>
  <div class="home">
    <LCR>
      <List :list="data" />
      <template #right>
        <BlogCard :shadow="false" style="margin-left: 1.25rem">
          <template #header>
            <div class="card-header">
              <span style="font-size: 1.5rem; font-weight: bold">资讯</span>
              <!-- <el-button class="button" text></el-button> -->
              <el-button text :icon="RefreshRight" @click="refresh">刷新</el-button>
            </div>
          </template>
        </BlogCard>
      </template>
    </LCR>
  </div>

  <!-- <div class="container">
    
    <div class=wraper>
      
      <div class="main">
      </div>
      <div class="aside">
        
      </div>
    </div>
    
  </div> -->

  <!-- <el-icon class="add-fixed" :size="30"><Plus /></el-icon> -->
  <el-button
    class="add-fixed"
    type="primary"
    size="large"
    :icon="Plus"
    circle
    title="发帖"
    @click="handlePost"
  ></el-button>
</template>

<style scoped lang="less">
.home {
  width: 80%;
  margin: 20px auto;
}
.el-card__header {
  padding: 0 !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 5px 10px;
}
.add-fixed {
  position: fixed;
  right: 5rem;
  bottom: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  padding: 30px;
}

// .container {
//   display: flex;
//   justify-content: center;

//   .wraper {
//     width: 90%;
//     display: flex;
//     margin-top: 1rem;
//     // flex-direction: column;
//     // justify-content: space-between;

//     .main {
//       flex: 23;
//     }
//     .aside {
//       flex: 10;
//     }

//     & > * {
//       margin-left: 1.25rem;
//     }
//   }
// }
</style>
